<template>
  <div>
    <el-row style="padding: 10px">
      <el-col :span="6">
        <div class="block">
          <span class="demonstration">开始时间：</span>
          <el-date-picker
            v-model="form.beginTime"
            type="datetime"
            @change="dateChange"
            size="small"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="block">
          <span class="demonstration">结束时间：</span>
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            @change="dateChange2"
            size="small"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4" class="flex">
        <span style="width: 120px;align-self: center;" >用户名：</span>
        <el-select v-model="form.userId" size="small" clearable placeholder="请选择">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small" @click="loadTable">查询</el-button>
      </el-col>
      <!--<el-col :span="4" style="font-size: 16px;font-weight: bold;">用户冻结金额列表</el-col>-->
    </el-row>
    <el-row>
      <el-table :data="page.list">

        <el-table-column width="80" type="index" align="center"></el-table-column>
        <el-table-column prop="username" label="操作者" align="center"></el-table-column>
        <el-table-column prop="changeName" label="被操作者" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作内容" align="center"></el-table-column>
        <el-table-column  label="创建时间" align="center">
          <template slot-scope="scope">
            {{dateformat(scope.row.createTime)}}
          </template>
        </el-table-column>
        <!--<el-table-column align="center">-->
        <!--<template slot-scope="scope">-->
        <!--<el-button type="text" @click="handleSave(scope.row.id)">修改</el-button>-->
        <!--<el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </el-row>
    <el-row style="padding: 10px;text-align: right">
      <el-pagination @current-change="pageChange" :current-page.sync="page.pageNumber" :page-size="page.pageSize"
                     layout="prev, pager, next, jumper" :total="page.totalRow">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>

  import dateformat from '../../../assets/js/dateformat'
  export default {
    name: 'permissionIndex',
    data: function () {
      return {
        page: {},
        form: {
          beginTime: undefined,
          endTime: undefined,
          pageSize: 10,
          pageNumber: 1,
          userId: undefined
        },
        dateformat: dateformat,
        userList: []
      }
    },
    methods: {
      loadTable: function () {
        if (this.form.beginTime === '') {
          this.form.beginTime = undefined
        }
        if (this.form.endTime === '') {
          this.form.endTime = undefined
        }
        this.$api.getUserSecond(this.form).then(res => {
          if (res.code == '000000') {
            this.page = res.data;
            this.$message.success("获取操作记录列表成功")
          }
        })
      },
      dateChange (val) {
        console.log(val)
        if (val) {
          this.form.beginTime = Date.parse(val)
        } else {
          this.form.beginTime = undefined
        }
      },
      dateChange2 (val) {
        console.log(val)
        if (val) {
          this.form.endTime = Date.parse(val)
        } else {
          this.form.endTime = undefined
        }
      },
      getUserList () {
        this.$api.getUserList({pageSize: 9999}).then((res) => {
          if (res.code == '000000') {
            this.userList = res.data.list;
          }
        })
      },
      pageChange (val) {
        this.form.pageNumber = val
        this.loadTable()
      }
    },
    created: function () {
      this.loadTable()
      this.getUserList()
    }
  }
</script>

<style>

</style>
